<template>
	<view class="container">
		<u-loading-page v-if="loading" :loading-text="$t('c.loading')"></u-loading-page>
		<template v-else>
			<view v-if="list.length" class="list">
				<view v-for="(item, index) in list" :key="index" :class="{item, disabled: item.disabled}">
					<view class="left">
						<text class="symbol">$</text>
						<text>{{item.price}}</text>
					</view>
					<view class="info">
						<view class="tags">
							<view v-for="(tag, index) in item.tags" class="tag">{{tag}}</view>
						</view>
						<view class="name">{{item.name}}</view>
						<view class="validity">{{$t('coupon.validity')}} ：{{item.validity}}</view>
					</view>
					<view class="right" @click="select(item)">
						<view class="btn">{{$t('coupon.use')}}</view>
					</view>
				</view>
			</view>
			<u-empty v-else style="margin-top: 200rpx;" :text="$t('c.not-data')"></u-empty>
		</template>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				isSelect: false,
				list: [],
				loading: true
			}
		},
		onLoad(option) {
			if (option && typeof option.select != 'undefined') {
				this.isSelect = true
			}
			this.getList()
		},
		methods: {
			getList() {
				this.loading = true
				setTimeout(() => {
					let i = 0
					while (i++ < 6) {
						this.list.push({
							id: i,
							price: 88.88 + i,
							name: '無門檻優惠券' + i,
							validity: '2023-08-01',
							tags: ['轉贈', '轉贈'],
							disabled: i > 5 ? 1 : 0
						})
					}
					this.loading = false
				}, 300)
			},
			select(item) {
				if (item.disabled) {
					return
				}
				if (this.isSelect) {
					uni.setStorage({
						key: 'selectCoupon',
						data: item
					})
					uni.navigateBack()
				} else {
					uni.switchTab({
						url: '/pages/index'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.list {
		padding: 24rpx;

		.item {
			border-bottom: 1rpx solid #E6EAEE;
			display: flex;
			justify-content: space-between;
			height: 180rpx;
			border-radius: 12rpx;
			color: #fff;
			background: linear-gradient(to left, #F8784F, #F96548);
			margin-bottom: 32rpx;

			.left {
				display: flex;
				text-align: center;
				align-items: center;
				justify-content: space-around;
				width: 220rpx;
				border-right: 1rpx dashed #fff;
				font-size: 68rpx;

				.symbol {
					width: 16rpx;
					font-size: 32rpx;
					margin-top: 8px;
				}
			}

			.info {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 24rpx 0 24rpx 8rpx;

				.tags {
					display: flex;

					.tag {
						margin-right: 8rpx;
						padding: 0 6rpx;
						background-color: #FF9479;
						border-radius: 16rpx;
						font-size: 22rpx;
					}
				}

				.name {
					font-size: 32rpx;
					font-weight: 600;
				}

				.validity {
					font-size: 24rpx;
				}
			}

			.right {
				height: 100%;
				display: flex;
				align-items: center;
				margin-right: 24rpx;

				.btn {
					height: 64rpx;
					padding: 0 12rpx;
					border-radius: 32rpx;
					border: 2rpx solid #fff;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	
		.disabled {
			opacity: 0.4;
		}
	}
</style>